<template>
    <div class="header-container">
        <div class="clear">
            <div class="headerHint clear">
                <div style="float: left;margin-left: 30px;padding-right: 10px;">
									<img src="../assets/header/toggleMenu.png" @click="toggleScreen" style="font-size: 26px;cursor:pointer;margin-top:33px;" ><span class="menuName">{{componentTitle}}</span>
                </div>
								<div class="bakHome" @click="jumpToHome">
									<img src="@/assets/header/home.png" width="26"><p>回到首页</p>
								</div>
            </div>
            <div class="userInfoWrap clear">
                <div class="userinfo">
									<p><span class="theme-header-username">2021年10月23日  09:43:50</span></p>
                  <img src="@/assets/header/AvatarIcon.png" width="55" alt="头像">
										
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
// import Theme from "@/untils/theme";
export default {
    data () {
        return {
            Theme: localStorage.getItem('theme'),
            isShow: false,
            username: "",
            tagNavList: [],
            noticeLists: [], //全部消息10条
            noreadNoticeLists: [],//全部消息10条
            visibleNotice: false
        };
    },
    computed: {
    	...mapGetters(['componentTitle'])
    },
    methods: {
        layoutFn () {
            this.$confirm("退出登录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(res => {
                    localStorage.clear();
                    window.location.href = "/";

                }).catch(() => {
                    console.log("取消退出");
                });
        },
				
        toggleScreen () {
           this.$emit("changeFlag");
        },
        jumpToHome () {
					if(localStorage.getItem('componentTitle').indexOf('14#机终端')>-1){
						this.$router.push('/home');
					}else{
						const num = localStorage.getItem('componentTitle').indexOf('#');
						const path = '/terminal'+ localStorage.getItem('componentTitle').substr(0,num);
						this.$router.push(path);
					}
          
        },
    }
};
</script>
<style lang='scss'>
.ctNoticeBox {
    padding: 0 !important;
}
.ctNoticeBox .el-tabs--border-card > .el-tabs__content {
    padding: 0 !important;
}
</style>

<style lang='scss' scoped>
$height: 90px;
.header-container {
	  background:#eff1f3 url(../assets/header/headerBg.png) 0 0 no-repeat;
    position: relative;
    width: 100%;
    height: $height;
    z-index: 3;
    .logoWrap {
        float: left;
        position: relative;
        width: 200px;
        height: $height;
        line-height: $height;
        // background-color: #1DA1F2;
        text-align: center;
        &::after {
            position: absolute;
            left: 6%;
            bottom: 0;
            content: "";
            background-color: rgba(255, 255, 255, 0.3);
            // height: 1px;;
            width: 88%;
        }
    }
    .headerHint {
        float: left;
        height: $height;
        line-height: $height;
				width:70%;
				.menuName{
					font-size:24px;
					color:#3b3c3d;
					padding-left:30px;
					font-weight: 600;
				}
				.bakHome{
					float:left;
					font-size:24px;
					color:#3b3c3d;
					padding-left:0px;
					font-weight: 600;
					margin-left:110px;
					img{
						vertical-align:middle;
						display:inline-block;
						margin-top: -6px;
					}
					p{
						padding-left:20px;
						display:inline-block;
					}
				}
    }
    .userInfoWrap {
        float: right;
        height: $height;
        line-height: $height;
        padding-left: 20px;
        margin: 0 20px 0 0;
        .userinfo {
            // margin-top: 3px;
            img {
                vertical-align: middle;
            }
            p {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
                // color: #606266;
                max-width: 290px;
                vertical-align: middle;
                margin: 0 40px 0 2px;
								font-size:24px;
            }
        }
    }
    .tag-container {
        margin-left: 200px;
        height: 40px;
        right: 0;
        left: 0;
        position: fixed;
    }
}
/*头部消息小铃铛*/
.ct_notice {
    float: right;
    height: $height;
    .ct_icon {
        cursor: pointer;
        display: block;
        height: 35px;
        line-height: 38px;
        margin-top: 5px;
        padding: 0 20px;
        position: relative;
        border-right: 1px solid #e8eaec;
        text-align: center;
        i.icon-xiaoxi1 {
            font-size: 24px;
            padding-top: 2px;
        }
        .ct_num {
            position: absolute;
            right: 18px;
            top: -22px;
            color: #f56c6c;
            font-size: 38px;
        }
    }
}
.ct_noticeListBox {
    border-top: 1px solid #dcdfe6;
}
.ct_noticeList {
    padding: 16px 14px;

    i {
        float: left;
        width: 24px;
        height: 24px;
        margin-top: 7px;
        position: relative;
    }
    .ct_hasread {
        position: absolute;
        width: 6px;
        height: 6px;
        background-color: #f56c6c;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        right: 0;
        top: 0;
    }
    dl {
        margin-left: 38px;
        dt {
            font-size: 12px;
            color: #3f4042;
            margin-bottom: 6px;
            span {
                color: #909399;
                margin-left: 12px;
            }
        }
        dd {
            display: block;
            overflow: hidden;
            white-space: nowrap; /*不换行*/
            text-overflow: ellipsis; /*超出部分省略号表示*/
            a {
                color: #606266;
                font-size: 12px;
            }
            a:hover {
                color: #3686ec;
            }
        }
    }
}
.ctNoticeBox .ct_noticeListBox:first-child {
    border-top: none;
}
.ctNoticeBox .lookMore {
    background-color: #f4f7fd;
}
.ctNoticeBox .lookMore a {
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #666;
}
.ctNoticeBox .noNoticeData {
    display: block;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #666;
}
.header-erweima {
    display: inline-block;
    padding: 18px;
    // &:nth-child(1) {
    //     padding-left: 18px;
    // }
    // &:nth-child(5) {
    //     padding-right: 18px;
    // }
}
</style>




